<template>
	<a-modal
		class="cp-top-menu-question-modal"
		:visible="show"
		title="全局参数"
		width="800px"
		@update:visible="emit('update:show', $event)"
	>
		<template #footer>
			<div></div>
		</template>
		<div class="tools-content">
			<a-table :data-source="params" bordered size="small" :pagination="false">
				<a-table-column key="in" title="位置" data-index="in" :width="80"></a-table-column>
				<a-table-column key="name" title="Key" data-index="name" :width="100"></a-table-column>
				<a-table-column key="value" title="值" data-index="value" :width="140"></a-table-column>
				<a-table-column key="operate" title="操作" :width="60" align="center">
					<template #default="{ index }">
						<a-button size="small" danger @click="onClickDelIndex(index)">删除</a-button>
					</template>
				</a-table-column>
			</a-table>
			<div class="bottom-action mt-4 flex-box space-x-2 p-2 rounded bg-gray-100">
				<a-select v-model:value="addFormdata.in" style="flex:86" placeholder="参数位置">
					<a-select-option value="query">Query</a-select-option>
					<a-select-option value="header">Header</a-select-option>
				</a-select>
				<a-input v-model:value="addFormdata.name" style="flex:90" placeholder="参数名" />
				<a-input v-model:value="addFormdata.value" style="flex:130" placeholder="值" />
				<a-button
					type="primary"
					style="margin-left:28px;margin-right:10px;"
					@click="onClickAddParam"
				>添加 +</a-button>
			</div>
		</div>
	</a-modal>
</template>
<script setup lang="ts">
import { reactive, computed, watch } from 'vue'
import { GlobalParam } from '/@/views/dangAn/constants/app'
import { cloneDeep } from 'lodash'
import { message } from 'ant-design-vue'
import { storage } from 'llm-web-tool'
const props = withDefaults(defineProps<{
	/**
	 * @props 当前api文档的url
	 */
	apiUrl: string
	/**
	 * @props 是否显示，支持v-model
	 */
	show?: boolean
	/**
	 * @props 全局参数数据，支持v-model
	 */
	params: GlobalParam[]
}>(), {
	show: false,
})

const emit = defineEmits(['update:show', 'update:params'])

// 全局参数从LocalStorage中存取
storage.config({ prefix: 'openapi-doc-' })

// 根据当前api计算本地params储存key
const storeParamsKey = computed(() => `global-params-${props.apiUrl}`);

// 读取本地params数据
const loadLocalParams = (key: string) => {
	let store_params = storage.local.get(key, null);
	let params_list: GlobalParam[] = [];
	if (store_params && Array.isArray(store_params)) {
		store_params.forEach(p => {
			if (p.name && ['query', 'header'].includes(p.in) && p.value) {
				params_list.push(p);
			}
		})
	}
	emit('update:params', params_list);
}

watch(() => storeParamsKey.value, (key) => {
	loadLocalParams(key)
}, { immediate: true })

const createAddFormData = () => ({
	name: '',
	in: null,
	value: '',
})
const addFormdata = reactive(createAddFormData())

const onClickDelIndex = (index: number) => {
	let params = cloneDeep(props.params)
	params.splice(index, 1);
	storage.local.set(storeParamsKey.value, params);
	emit('update:params', params)
}

const onClickAddParam = () => {
	let params = cloneDeep(props.params)
	params.push(cloneDeep(addFormdata as any))
	Object.assign(addFormdata, createAddFormData())
	storage.local.set(storeParamsKey.value, params);
	emit('update:params', params)
}



</script>